// Surface and elevation definitions
//  db = elevation unit, larger means higher elevation (closer)

@mixin generate-surface-styles($elevations) {
  @each $elevation in $elevations {
    .srfc-#{$elevation}db {
      background: var(--clr-el-#{$elevation}db);
    }
  }
}

// Colors
:root {
  --clr-el-01db: #151526;
  --clr-el-02db: #1d1d2d;
  --clr-el-03db: #242434;
}

@include generate-surface-styles(('01', '02', '03'));
